<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="layout/layout">
<title layout:fragment="title">未缴账单</title>
<body>
<div class="main-content" layout:fragment="content">
    <div class="breadcrumbs" id="breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a th:href="@{/}" href="/">首页</a>
            </li>
            <li class="active">未缴账单</li>
        </ul>
    </div>
    <!-- .page-content -->
    <div class="page-content">
        <div class="row">
            <div class="alert alert-block alert-danger hide">
                <button type="button" class="close" data-dismiss="alert">
                    <i class="icon-remove"></i>
                </button>
                <i class="icon-remove red"></i>
                <span id="error-info" class="red"></span>
            </div>
            <div class="col-xs-12">
                <a href="javascript:void(0)" class="btn btn-primary btn-sm" id="importBtn">
                    <i class="icon-plus icon-on-right bigger-120" style="top: 2px"></i> 导入未缴账单</a>
                <a href="javascript:void(0)" class="btn btn-danger btn-sm" id="deleteBtn">
                    <i class="icon-remove icon-on-right bigger-120" style="top: 2px"></i> 批量删除</a>
            </div>
            <hr/>
            <div class="col-xs-12">
                <form class="form-search" id="search-form">
                    <label for="houseNumber" class="search-label">房号</label>
                    <input type="text" class="search-query" name="houseNumber" id="houseNumber">
                    <label for="liveUserName" class="search-label">住户名称</label>
                    <input type="text" class="search-query" name="liveUserName" id="liveUserName">
                    <label for="liveUserMobile" class="search-label">手机号码</label>
                    <input type="text" class="search-query" name="liveUserMobile" id="liveUserMobile">
                    <br>
                    <label for="releaseStartTime" style="padding-top: 5px; padding-right: 5px;">出账开始日期</label>
                    <input type="text" class="input-small date-picker" readonly="readonly" name="paidStartTime"
                           id="releaseStartTime"/>
                    <label for="releaseEndTime" style="padding-top: 5px; padding-right: 5px;">出账结束日期</label>
                    <input type="text" class="input-small date-picker" readonly="readonly" name="paidEndTime"
                           id="releaseEndTime"/>

                    <button type="button" class="btn btn-primary btn-sm" id="btn_search">查询
                        <i class="icon-search icon-on-right bigger-110"></i></button>
                    <button type="button" class="btn btn-sm" id="btn_search_clear">清空
                        <i class="icon-undo icon-on-right bigger-110"></i></button>
                </form>
            </div>

            <div class="col-xs-12">
                <table id="dataTable" class="table table-bordered table-striped dataTable"
                       aria-describedby="tradeTable_info">
                    <thead class="thin-border-bottom"></thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="import-modal" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">未缴账单导入</div>
                <div class="modal-body">
                    <form method="post" th:action="@{/pmbill/needpay/import}" class="form-horizontal" role="form" enctype="multipart/form-data">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right">Excel文件<span class="red">*</span></label>
                            <div class="col-sm-7">
                                <input type="file" name="billExcel" id="excel-input-file">
                                <p>没有模板？点击<a target="_blank" href="/wuye_weijiaozhandan.xlsx">下载Excel示例模板</a></p>
                                <p>根据文件大小的不同，上传可能耗时较长，请耐心等待</p>
                            </div>
                        </div>
                        <div class="space-4"></div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success btn-sm" id="start-import-btn">
                        <i class="icon-save"></i>
                        导入
                    </button>
                    <button class="btn btn-danger btn-sm" data-dismiss="modal">
                        <i class="icon-remove"></i>
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script layout:fragment="script" th:src="@{/assets/js/pmneedpaybill/home.js}"></script>
</body>
</html>